<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

import Client from '../../../req/common.js';
import Utils from "../../../req/Utils.js";
import { showToast} from "vant";


const props = defineProps({
  iNow: {
    type: Number,
    default: 0
  },
  product: {
    type: Object
  }
});


const currentData = ref<any>({
  arr: ['1.85rem','1.75rem']
});

const addCart = (product:any) => {
  showToast("添加商品成功");
  // 添加购物车
  Utils.addCart(product);
};
const toDetail = (id:any) => {
  router.push({path: "/productDetail", query: {productId: id}});
};
const getImg = (str:String, index:any) => {
  if(str.indexOf(",")>0){
    let arr = str.split(',')
    return arr[index];
  }else {
    return str;
  }
};
</script>
<template>
  <section class="homeOtherProductUtil" :style="{width: currentData.arr[props.iNow]}" v-if="props.product">
    <div class="big-img" @click="toDetail(props.product.productId)" :style="{height: currentData.arr[props.iNow], background: `url(${props.product.productIcon}) no-repeat center`}"></div>
    <div class="desc">{{props.product.productDescription}}</div>
    <div class="wrap">
      <div class="price"><span>￥</span>{{props.product.productPrice}}</div>
      <!-- <div class="btn" v-if="iNow==0">看相似</div> -->
      <div class="cart" @click="addCart(props.product)"></div>
    </div>
  </section>
</template>

<style lang="less" scoped>
.homeOtherProductUtil {
  width: 1.85rem;
  min-height: 2.5rem;
  background: white;
  // &.type {
  //   .big-img {
  //     width: 
  //   }
  // }
  .big-img {
    width: 100%;
    height: 1.85rem;
    background-size: cover !important;
    margin-bottom: .05rem;
  }
  .cart {
    width: .2rem;
    height: .2rem;
    background: url("../../../assets/images/cart-icon-5.png") no-repeat center;
    background-size: contain;
  }
  .desc {
    // width: 1.85rem;
    height: .34rem;
    line-height: .17rem;
    padding: 0 .05rem;
    box-sizing: border-box;
    color: #232326;
    font-size: .14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
    margin-bottom: .06rem;
  }
  .wrap {
    display: flex;
    padding: 0 .05rem;
    justify-content: space-between;
    position: relative;
    margin-bottom: .15rem;
    .price {
      font-size: .16rem;
      color: #f23030;
      span {
        font-size: .14rem;
      }
    }
    .btn {
    position: relative;
    text-align: center;
    color: #686868;
    font-size: .12rem;
    width: .5rem;
    height: .25rem;
    line-height: .25rem;
      &:after {
        content: "";
        width: 200%;
        height: 200%;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid #bfbfbf;
        transform: scale(.5,.5);
        transform-origin: top left;
      }
    }
  }
}
</style>

